<template>
  <div>
    <div class="book_left">
      <ul class="b_l_top">
<!--        <li class="on" v-for="(item,index) in bigImgList" :key="index" >-->
<!--          <img :src="isShowPic" alt="" width="276" height="372">-->
<!--        </li>-->
        <img :src="curBook.cover_url" alt="" width="350" height="372">
      </ul>
<!--      <ul class="b_l_bottom">-->
<!--        <li class="on" v-for="(item,index) in smallImgList" :key="index" @click="solidClick(item)"><a href="javascript:;">-->
<!--          <img :src="item" alt="" width="65" height="95"></a>-->
<!--        </li>-->

<!--      </ul>-->
      <h2 style="text-align: center;margin-top: 10px;color: #ffef68">{{ curBook.title }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerList",
  props:{
    curBook:{
      type:Object,
      require: true
}
  },
  data(){
    return{
      isShowPic:"http://www.tup.tsinghua.edu.cn/upload/bigbookimg/047897-01.jpg",
      bigImgList:[
          'http://www.tup.tsinghua.edu.cn/upload/bigbookimg/047897-01.jpg',
          'http://www.tup.tsinghua.edu.cn/upload/bigbookimg2/',
          'http://www.tup.tsinghua.edu.cn/upload/bigbookimg2/'
      ],
      smallImgList:[
          'http://www.tup.tsinghua.edu.cn/upload/smallbookimg/047897-01.jpg',
          'http://www.tup.tsinghua.edu.cn/upload/smallbookimg2/',
          'http://www.tup.tsinghua.edu.cn/upload/smallbookimg2/'
      ],

    }
  },
  methods:{
    solidClick(item){
      // console.log(index)
      this.isShowPic=item
      // let bigImg = document.getElementsByClassName('b_l_top')[0]
      // let lis = bigImg.getElementsByTagName('li')
      // for(let i = 0;i<=lis.length;i++){
      //   if(i === index){
      //     lis[i].style.display = 'block'
      //   }else{
      //     lis[i].style.display = 'none'
      //   }
      // }

    }
  },
  mounted() {
    let bigImg = document.getElementsByClassName('b_l_top')[0]
    let lis = bigImg.getElementsByTagName('li')
    lis[0].style.display = 'block'
  }

}
</script>

<style scoped>


.book_left {
  float: left;
  width: 380px;
}
.b_l_top {
  height: 386px;
  background: #fff;
}
.b_l_top li {
  display: none;
  text-align: center;
}
.b_l_bottom {
  height: 140px;
  margin-top: 50px;
}
.b_l_bottom li {
  float: left;
  width: 126px;
  text-align: center;
}
.b_l_bottom li a {
  padding-top: 10px;
  display: block;
  background: #ffffff;
  width: 115px;
  margin: 0px auto;
  margin-top: 13px;
}
</style>